<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>WSN管理页面</el-breadcrumb-item>
      <el-breadcrumb-item>数据采集</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 总数据分析 -->
      <el-tag
        @click="getSystemData"
        style="float:left;margin:10px 0px;cursor:pointer"
        >网络总指标</el-tag
      >
      <el-input-number
        v-model="srcAddress"
        style="float:left;margin:10px 10px;"
        size="mini"
        :min="1"
        :max="10"
        label="描述文字"
      ></el-input-number>

      <el-table :data="SystemData" style="width: 100%" border>
        <el-table-column
          prop="nodeCount"
          label="数据数量"
          width="50"
        ></el-table-column>

        <el-table-column
          prop="packetLossCount"
          label="丢包数"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="packetLossRate"
          label="丢包率"
          width="60"
        ></el-table-column>
        <el-table-column
          prop="packageDeliveryRate"
          label="包交付率"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="meanETX"
          label="ETX均值"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="meanRSSI"
          label="RSSI均值"
          width="60"
        ></el-table-column>
        <el-table-column
          prop="meanLQI"
          label="LQI均值"
          width="80"
        ></el-table-column>
        <!-- </el-table> -->
        <!-- <el-table :data="SystemData" style="width: 100%" border> -->
        <!-- <el-table-column
          prop="systemMaxHop"
          label="网络最大跳数"
          width="100"
        ></el-table-column> -->
        <el-table-column
          prop="systemMeanHop"
          label="网络平均跳数"
          width="100"
        ></el-table-column>
        <!-- <el-table-column
          prop="meanPathTurbulence"
          label="平均路径扰动"
          width="100"
        ></el-table-column> -->
        <el-table-column
          prop="dataSize"
          label="data总量"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="broadcastPackage"
          label="控制开销数量"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="broadcastPackageRate"
          label="控制开销比例"
          width="100"
        ></el-table-column>

        <el-table-column
          prop="numberOfCopies"
          label="副本数量"
          width="80"
        ></el-table-column>
        <el-table-column prop="numberOfCopiesRate" label="副本比例" width="80">
        </el-table-column>
        <!-- <el-table-column
          prop="numberOfPackets"
          label="数据包数量"
          width="100"
        ></el-table-column> -->
        <!-- <el-table-column
          prop="numberOfACK"
          label="ACK包个数"
          width="90"
        ></el-table-column> -->
        <el-table-column prop="flow" label="流量"></el-table-column>
      </el-table>

      <!-- 单个节点数据 -->
      <el-tag
        @click="getNodeData"
        style="float:left;margin:10px 0px;cursor:pointer"
        >节点选择</el-tag
      >
      <el-input
        v-model="node"
        style="float:left;margin:10px 10px;width:100px;height:40px"
        size="mini"
      ></el-input>
      <!-- <el-select
        style="float:left;margin:20px 10px;"
        size="small"
        v-model="value"
        placeholder="请选择"
        change="filterNodeId()"
      >
        <el-option
          style="height:30px"
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->

      <el-table :data="NodeData" :key="cerKey" border style="width:100%">
        <el-table-column
          prop="nodeId"
          label="节点ID"
          width="80"
          :filters="filters"
          :filter-method="filterNodeId"
        >
        </el-table-column>
        <el-table-column prop="packetLossCount" label="丢包量" width="60">
        </el-table-column>
        <el-table-column
          prop="packetLossRate"
          label="丢包率"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="packageDeliveryRate"
          label="包交付率"
          width="80"
        ></el-table-column>
        <el-table-column prop="etx" label="ETX" width="50"></el-table-column>
        <el-table-column
          prop="meanRSSI"
          label="RSSI均值"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="meanLQI"
          label="LQI均值"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="maxHop"
          label="最大跳数"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="meanHop"
          label="平均跳数"
          width="80"
        ></el-table-column>

        <el-table-column
          prop="pathTurbulence"
          label="路径扰动"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="dataSize"
          label="data总量"
          width="80"
        ></el-table-column>
        <!-- <el-table-column
          prop="numberOfPackets"
          label="数据包数量"
          width="100"
        ></el-table-column> -->
        <el-table-column
          prop="broadcastPackage"
          label="控制开销数量"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="broadcastPackageRate"
          label="控制开销比例"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="numberOfCopies"
          label="副本数量"
          width="60"
        ></el-table-column>
        <el-table-column
          prop="numberOfCopiesRate"
          label="副本比例"
          width="80"
        ></el-table-column>
        <el-table-column prop="flow" label="流量"></el-table-column>
      </el-table>

      <!-- 原生数据 -->
      <el-row style="margin-top:10px">
        <el-tag style="float:left;margin:10px 0px;">数据采集</el-tag>

        <el-button
          type="primary"
          style="float:right;margin:10px 0px"
          @click="getRSSIData"
          >获取数据</el-button
        >
      </el-row>
      <el-table :data="RSSIData" border style="width: 100%">
        <el-table-column prop="seqnuminpsdfile" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="length" label="长度" width="60">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="60"> </el-table-column>
        <el-table-column prop="dsn" label="DSN" width="80"> </el-table-column>
        <el-table-column prop="destpan" label="DESTPAN" width="100">
        </el-table-column>
        <el-table-column prop="destaddress" label="destaddress" width="100">
        </el-table-column>
        <el-table-column prop="srcaddress" label="srcaddress" width="100">
        </el-table-column>
        <el-table-column prop="payload" label="payload" width="350">
        </el-table-column>
        <el-table-column prop="rssi" label="rssi" width="100">
        </el-table-column>
        <el-table-column prop="lqi" label="LQI" width="100"></el-table-column>
        <el-table-column prop="crc" label="CRC"></el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="float:left;margin:10px 0px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: [],
      numberOfNode: 0,
      value: "",
      srcAddress: 10,
      node: 10,
      cerKey: 1,
      SystemData: [
        {
          nodeCount: "",
          meanETX: "",
          packetLossCount: "",
          packetLossRate: "",
          packageDeliveryRate: "",
          meanRSSI: "",
          meanLQI: "",
          systemMaxHop: "",
          systemMeanHop: "",
          dataSize: "",
          broadcastPackage: "",
          broadcastPackageRate: "",
          meanPathTurbulence: "",
          numberOfCopies: "",
          numberOfCopiesRate: "",
          numberOfPackets: "",
          numberOfACK: "",
          flow: ""
        }
      ],
      NodeData: [
        {
          nodeId: "",
          packetLossCount: "",
          packetLossRate: "",
          ETX: "",
          meanRSSI: "",
          meanLQI: "",
          maxHop: "",
          meanHop: "",
          dataSize: "",
          packageDeliveryRate: "",
          pathTurbulence: "",
          numberOfPackets: "",
          flow: "",
          broadcastPackage: "",
          numberOfCopies: "",
          numberOfCopiesRate: ""
        }
      ],
      RSSIData: [
        {
          dataType: "",
          id: "",
          length: "",
          macPayload: "",
          sequenceId: "",
          panId: "",
          sourceId: "",
          targetId: "",
          rssi: "",
          LQI: "",
          CRC: ""
        }
      ],
      queryInfo: {
        query: "",
        pagenum: 0,
        pagesize: 10
      },
      total: 0
    };
  },
  methods: {
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getRSSIData();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getRSSIData();
    },
    filterNodeId(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    async getCountOfRSSI() {
      const { data } = await this.$http.get("/snifferdata/selectAll");
      if (data.code !== 0) {
        this.$message.error("获取RSSI总个数数据失败!");
      } else {
        this.total = data.data.size;
      }
    },
    async getRSSIData() {
      const { data } = await this.$http.get("/snifferdata/pageLimit", {
        params: {
          pageNumber: this.queryInfo.pagenum,
          pageSize: this.queryInfo.pagesize
        }
      });
      if (data.code !== 0) {
        this.$message.error("获取RSSI数据失败!");
      } else {
        this.RSSIData = data.data;
      }
    },
    async getSystemData() {
      const { data } = await this.$http.get("/snifferdata/systemInfo", {
        params: {
          srcAddress: this.srcAddress
        }
      });
      if (data.code !== 0) {
        this.$message.error("获取系统数据失败!");
      } else {
        this.SystemData[0] = data.data;
      }
    },
    async getNodeData() {
      const { data } = await this.$http.get("/snifferdata/nodeInfo", {
        params: { node: this.node }
      });
      if (data.code !== 0) {
        this.$message.error("获取packetLoss数据失败!");
      } else {
        console.log(data.data);
        this.NodeData = data.data;
        this.filters = [];
        this.NodeData.forEach(element => {
          this.filters.push({
            text: "节点" + element.nodeId,
            value: element.nodeId
          });
          this.value = element.nodeId;
        });
      }
    }
    // timer() {
    //   return setInterval(() => {

    //   }, 1000);
    // }
    //   async getanalysisRSSI() {
    //     const { data } = await this.$http.get("/snifferdata/packetLoss");
    //     if (data.code !== 0) {
    //       this.$message.error("获取packetLoss数据失败!");
    //     } else {
    //       this.analysisRSSI[0].dropCnt = data.data.dropCnt;
    //       this.analysisRSSI[0].dropRate = data.data.dropRate;
    //       this.analysisRSSI[0].ETX = data.data.ETX;
    //     }
    //   },
    //   async selectTHL() {
    //     const { data } = await this.$http.get("/snifferdata/selectTHL");
    //     if (data.code !== 0) {
    //       this.$message.error("获取selectTHL数据失败!");
    //     } else {
    //       this.analysisRSSI[0].meanHop = data.data.meanValue;
    //       this.analysisRSSI[0].maxHop = data.data.maxValue;
    //     }
    //   },
    // filterSrcAddress(value, row) {
    //   return row.srcaddress === value;
    // },
    // },
  },
  created() {
    this.getNodeData();
    this.getSystemData();
    this.getCountOfRSSI();
    this.getRSSIData();
    // this.timer();
    // this.getanalysisRSSI();
    // this.selectTHL();
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less" scoped></style>
